'use client';

import React from 'react';
// import weatherImage from './weather.svg';
import shadow from './shadow.png';
import logoImage from './logo2.png';
import cloud from './cloud.png';
import heavy from './heavy.png';
import lighting from './lighting.png';
import runny from './runny.png';
import sun from './sun.png';
import Image from 'next/image';

import styles from './index.module.scss';
import { Divider, Space } from 'antd';
import dayjs from 'dayjs';
import type { Dayjs } from 'dayjs';
import { useState, useEffect } from 'react';
import { useStatisticsData } from '../../hooks/useStatisticsData';
import { px2vw, px2vh, responsive } from '@/app/cg06/utils/responsive'; 

const Header: React.FC = () => {
	const [time, setTime] = useState<Dayjs>();
	useEffect(() => {
		const timer = setInterval(() => {
			setTime(dayjs());
			if (dayjs().format('HH:mm:ss') === '08:00:00') {
				window.location.reload();
			}
		}, 1000);

		return () => clearInterval(timer);
	}, []);
	// const { data } = useStatisticsData();
	// const weatherInfo: {
	// 	temp: string;
	// 	weather: string;
	// 	weathere: string;
	// 	weathercode: string;
	// } = data?.weatherInfo ? JSON.parse(data?.weatherInfo) : {};
	// const weathercode = weatherInfo.weathercode?.replace(/[n,d]/, '');

	// let weatherIcon = require('./wether/99.png')
	// try {
	// 	weatherIcon = require('./wether/' + (weathercode || '99') + '.png');
	// } catch (e) { 
	// 	weatherIcon = require('./wether/99.png')
	// }

	return (
		<div className={styles.container}>
			<div className={styles.background}>
				<div style={{ position: 'absolute', top: 10, left: 20 }}>
					<Image
						src={logoImage}
						alt="logoImage"
						style={{ width: px2vw(136), height: px2vh(46) }}
					/>
				</div>
				<div
					style={{ fontSize: px2vw(28), color: '#DFF2FF', paddingTop: px2vh(13), flex: 1 }}
				>
					两仓一线数字大屏
				</div>
				<Space
					split={
						<Divider
							type="vertical"
							style={{ background: '#4B4B67', height: px2vw(30), marginTop: px2vw(6) }}
						/>
					}
					align="start"
					style={{ position: 'absolute', top: 0, right: 0 }}
				>
					{/* <div style={{ textAlign: 'right' }}>
						<div className={styles.textHighlight}>
							{time?.format('HH:mm:ss')}
						</div>
						<div className={styles.text}>{time?.format('YYYY-MM-DD')}</div>
					</div> */}
					{/* <Space>
						{weatherIcon ? (
							<Image width={40} height={40} src={weatherIcon} alt="weather" />
						) : null}
						<div>
							<div className={styles.textHighlight}>{weatherInfo.temp}℃</div>
							<div className={styles.text} style={{textAlign: 'left'}}>{weatherInfo.weather}</div>
						</div>
					</Space> */}
				</Space>
			</div>
		</div>
	);
};

export default Header;

